<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/my02.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<div class="left">
					<div class="item">
						<span class="iconfont">&#xe619;</span>
						<span id="show_tem">0</span>
						<span>℃</span>
					</div>
					<div class="item">
						<span class="iconfont">&#xe609;</span>
						<span id="show_hum">0</span>
						<span>%</span>
					</div>
				</div>

				<div class="right">
					<button type="button" id="open_btn" onclick="conetmqtt()">连接</button>
					<button type="button" id="close_btn" onclick="closemqtt()">断开</button>
					<button type="button" id="w_btn" onclick="sendmqtt('1')">开启警告</button>
					<button type="button" id="cw_btn" onclick="sendmqtt('0')">关闭警告</button>
				</div>
			</div>

			<div class="bottom">
				<div class="item">
					<div class="item_left">
						<div class="iconfont">温度&#xe61c;</div>
						<div class="iconfont">&#xe618;</div>
						<div class="rate">Ymin=10</div>
					</div>
					<canvas id="cav1" width="500" height="200"></canvas>
				</div>

				<div class="item">
					<div class="item_left">
						<div class="iconfont">湿度&#xe61a;</div>
						<div class="iconfont">&#xe618;</div>
						<div class="rate">Ymin=10</div>
					</div>
					<canvas id="cav2" width="500" height="200"></canvas>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}

			var ctx1 = $('cav1').getContext('2d');
			var ctx2 = $('cav2').getContext('2d');



			var data_temp = [{
				x: 0,
				y: 0
			}]
			var data_hum = [{
				x: 0,
				y: 0
			}]

			/*使用面向对象的方式实现*/
			var LineChart = function(ctx) {
				//绘制工具
				this.ctx = ctx;
				//网格大小
				this.gridSize = 10;
				// y轴比值
				this.gridSizeY = 20;

				//网格线的颜色
				this.gridColor = '#fff';
				//轴的离边距离
				this.space = 10;
				//箭头的尺寸
				this.arrowSize = 10;
				//点尺寸
				this.pointSize = 3;

				//画布的高度
				this.canvasHeight = this.ctx.canvas.height;
				//画布的宽度
				this.canvasWidth = this.ctx.canvas.width;

				//入口函数
				//this.init();
			}
			//入口函数
			LineChart.prototype.init = function(data) {

				this.ctx.canvas.width = this.ctx.canvas.width;

				var date_this = data;
				var CountSize = Math.floor(this.canvasWidth / this.gridSize);
				// CountSize += 5;
				// console.log(CountSize);
				// 500/10=50
				if (date_this.length >= (50-this.gridSize) ) {
					this.gridSize = 5;
					if (date_this.length > 90) {
						// 取余90多出的数据，每90数据从头开始
						var CountLength = date_this.length % 90;

						console.log(CountLength);
						// 删除前面数组
						date_this.splice(0, date_this.length - CountLength);

						// console.log(data_temp_length);
						for (var i = 0; i < date_this.length; i++) {
							date_this[i].x -= (data_temp_length - CountLength) * 10;

						}
						// console.log(date_this);
					}

				}

				this.drawGrid();
				this.drawXY();
				this.drawPointList(date_this);
				// this.joinPoint();
			};
			//绘制网格
			LineChart.prototype.drawGrid = function() {
				/*业务*/
				/*1. 绘制X轴方向的线*/
				var xCount = Math.floor(this.canvasHeight / this.gridSizeY);
				// var xCount = Math.floor(this.canvasHeight / 6);
				for (var i = 0; i < xCount; i++) {

					this.ctx.beginPath();
					this.ctx.moveTo(0, i * this.gridSizeY + 10);
					this.ctx.lineTo(this.canvasWidth, i * this.gridSizeY + 10);
					this.ctx.strokeStyle = this.gridColor;
					this.ctx.stroke();
				}

				/*2. 绘制Y轴方向的线*/
				var yCount = Math.floor(this.canvasWidth / this.gridSize);
				for (var i = 0; i < yCount; i++) {
					this.ctx.beginPath();
					this.ctx.moveTo(i * this.gridSize, 0);
					this.ctx.lineTo(i * this.gridSize, this.canvasHeight);
					this.ctx.strokeStyle = this.gridColor;
					this.ctx.stroke();
				}
			}
			//绘制原点和坐标轴
			LineChart.prototype.drawXY = function() {
				/*1.坐标原点*/
				this.x0 = this.space;
				this.y0 = this.canvasHeight - this.space;
				/*2.绘制X轴*/
				this.ctx.beginPath();
				this.ctx.moveTo(this.x0, this.y0);
				this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
				this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
				this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
				this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
				this.ctx.strokeStyle = '#000';
				this.ctx.stroke();
				this.ctx.fill();
				/*3.绘制Y轴*/
				this.ctx.beginPath();
				this.ctx.moveTo(this.x0, this.y0);
				this.ctx.lineTo(this.space, this.space);
				this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
				this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
				this.ctx.lineTo(this.space, this.space);
				this.ctx.stroke();
				this.ctx.fill();
			}

			//绘制所有点
			LineChart.prototype.drawPointList = function(data) {
				//测试
				//this.drawPoint(200,200);
				var _this = this;
				//原来的点
				var oldPoint = {
					x: this.x0,
					y: this.y0
				};

				data.forEach(function(item, i) {
					/*绘制小正方形 就是点*/
					/*在绘制之前转成cnavas坐标*/
					// 10单位一格
					var x = _this.x0 + (item.x / 10 * _this.gridSize);
					var y = _this.y0 - item.y / 10 * _this.gridSizeY;
					_this.drawPoint(x, y);
					_this.joinPoint(oldPoint, {
						x: x,
						y: y
					});

					//连线完毕之后去记录  把这一次的点当做下一次连线的起始点
					oldPoint = {
						x: x,
						y: y
					}
				});


			}
			// 绘制点
			LineChart.prototype.drawPoint = function(x, y) {
				this.ctx.moveTo(x - this.pointSize / 2, y - this.pointSize / 2);
				this.ctx.lineTo(x + this.pointSize / 2, y - this.pointSize / 2);
				this.ctx.lineTo(x + this.pointSize / 2, y + this.pointSize / 2);
				this.ctx.lineTo(x - this.pointSize / 2, y + this.pointSize / 2);
				this.ctx.closePath();
				this.ctx.fill();
			};
			//连接点
			// 画线
			LineChart.prototype.joinPoint = function(oldPoint, currPoint) {
				/*上一个点的坐标和现在的坐标相连*/
				//oldPoint {x,y}
				//currPoint {x,y}
				this.ctx.beginPath();
				this.ctx.moveTo(oldPoint.x, oldPoint.y);
				this.ctx.lineTo(currPoint.x, currPoint.y);
				this.ctx.stroke();
			};

			//使用
			//添加输出测试
			// for(var i=0;i<300;i++){
			// 	data_temp.push({x:(data_temp.length+1)*10 ,y:25});				
			// }
			// for(var i=0;i<197;i++){
			// 	data_temp.push({x:(data_temp.length+1)*10 ,y:35});				
			// }
			// data_temp.push({x:(data_temp.length+1)*10 ,y:25})



			var data_temp_length = data_temp.length;

			var lineChart = new LineChart(ctx1);
			lineChart.init(data_temp);

			var lineChart2 = new LineChart(ctx2);
			lineChart2.init(data_hum);

			// 数据入栈
			function putdata(data, dataY) {
				data.push({
					x: (data.length + 1) * 10,
					y: dataY
				});
				data_temp_length = data.length;

			}


			// 测试使用
			// putdata(data_temp,23)
			// for(var i=0;i<300;i++){
			// 	putdata(data_temp,33)
			// }
			// putdata(data_temp,23)
			// putdata(data_temp,43)
			lineChart.init(data_temp);

			// console.log(data_temp);
			// var lineChart = new LineChart(ctx2);
			// lineChart.init(data_temp);





			/* 
			
			mqtt 客户端 =================================
			*/


			var hostname = 'www.ljhong.icu',
				port = 1884,
				clientId = 'client-LJH' + parseInt(Math.random() * 100, 10),
				timeout = 5,
				keepAlive = 50,
				cleanSession = false,
				ssl = false,
				userName = 'ljhws',
				password = '123',
				topic = 'tem',
				topic2 = 'hum',
				sendtopic = 'led';
			var client = null;
			client = new Paho.MQTT.Client(hostname, port, clientId);

			//建立客户端实例  
			var options = {
				invocationContext: {
					host: hostname,
					port: port,
					path: client.path,
					clientId: clientId
				},
				timeout: timeout,
				keepAliveInterval: keepAlive,
				cleanSession: cleanSession,
				useSSL: ssl,
				userName: userName,
				password: password,
				onSuccess: onConnect,
				onFailure: function(e) {
					console.log(e);
				}
			};

			// client.connect(options);
			//连接服务器并注册连接成功处理事件  

			function onConnect() {
				console.log("onConnected");
				client.subscribe(topic);
				client.subscribe(topic2);
				console.log(topic + ',' + topic2);
			}

			client.onConnectionLost = onConnectionLost;
			//注册连接断开处理事件  
			client.onMessageArrived = onMessageArrived;
			//注册消息接收处理事件  

			function onConnectionLost(responseObject) {
				console.log(responseObject);
				if (responseObject.errorCode !== 0) {
					console.log("onConnectionLost:" + responseObject.errorMessage);
					console.log("连接已断开");
				}
			}

			function onMessageArrived(message) {
				// console.log(message);
				// console.log("收到消息:" + message.payloadString);


				if (message.destinationName == topic) {
					// console.log(topic);
					putdata(data_temp, message.payloadString);
					$('show_tem').innerText = message.payloadString;
					lineChart.init(data_temp);
				}
				if (message.destinationName == topic2) {
					// console.log(topic2);
					putdata(data_hum, message.payloadString);
					$('show_hum').innerText = message.payloadString;
					lineChart2.init(data_hum);
				}
			}
			// 连接服务器
			function conetmqtt() {
				client.connect(options);
				$('open_btn').style.backgroundColor = '#5de71d';

			}

			function closemqtt() {
				window.location.reload();
			}

			function sendmqtt(mes) {
				message = new Paho.MQTT.Message(mes);
				message.destinationName = sendtopic;
				client.send(message);
				if (mes == '1') {
					$('w_btn').style.backgroundColor = '#ff0000';
				} else {
					$('w_btn').style.backgroundColor = '#07c2ec';
				}

			}
		</script>

	</body>
</html>
